<template>
	<view>
		<view class="wdxxmain" style="padding-bottom:10upx;">
			<view class="wdmstitleimg">
				上传图片处方单<text>(必填)</text>
			</view>
			<view class="uni-list list-pd">
				<view class="uni-list-cell cell-pd">
					<view class="uni-uploader">
						<view class="uni-uploader-head" style="padding: 0 10upx;">
							<view class="uni-uploader-title">点击可预览选好的图片</view>
							<view class="uni-uploader-info">{{ imageList.length }}/1</view>
						</view>
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-for="(image, index) in imageList" :key="index">
									<view class="uni-uploader__file">
										<view @tap="delimg(index)" class="icon iconfont iconshanchu"></view>
										<image class="uni-uploader__img" src="image" :src="image" :data-src="image" @tap="previewImage"></image>
									</view>
								</block>
								<view class="uni-uploader__input-box"><view class="uni-uploader__input" @tap="chooseImage"></view></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<button class="onname" type="primary" @tap="onUpal()">提交划价</button>
	</view>
</template>

<script>
	var sourceType = [['camera'], ['album'], ['camera', 'album']];
	var sizeType = [['compressed'], ['original'], ['compressed', 'original']];
	export default {
		data() {
			return {
				imageList: [],
				sourceType: ['拍照', '相册', '拍照或相册'],
				countIndex:1,
				count: [1]
			}
		},
		methods: {
			onUpal(){
				var items =this.imageList
				var img = '';
				items.forEach(e => {
					if(e){
						if(!img){
						 img=e
						}else{
						 img=img+','+e
						}
					}
				});
				if(!img){
					this.$api.msg("请选择处方单图片提交");
					return false;
				}
				this.upal(img)
			},
			async upal(img) {
				let [err,res] = await this.$http.post('/apip/useryy/pfzyadd',{urls:img},{token:true});
				if (!this.$http.errorCheck(err,res)) return;
				if(res.data.code === 1){
					 uni.showModal({
					 	title: '',
					 	content:"提交成功",
					 	showCancel: false,
					 	confirmText: "确定",
					 	success: function (res) {
					 		uni.navigateBack({})
					 	}
					 });
				}else{
					this.$api.msg("提交失败");
				}
			},
			delimg(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index, 1);
						}
					}
				});
			},
			chooseImage: async function() {
				if (this.imageList.length === 1) {
					return;
				}
				uni.chooseImage({
					count: 1, //默认9
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					success: res => {
						uni.showLoading({ mask: true,title: '正在加载' });  
 						uni.uploadFile({
							url: this.config.webUrl+'/apip/user/imagepic', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: "file",
							dataType:"json",
							formData: {
								'token': uni.getStorageSync("userInfo").token,
								'uid': uni.getStorageSync("userInfo").id,
							},
							success: (uploadFileRes) => {
									uni.hideLoading();
								var dataarr=JSON.parse(uploadFileRes.data);
								if(dataarr.code==1){
									this.imageList = this.imageList.concat([this.config.imgUrl+dataarr.data]);
								}else{
									uni.showToast({
										title:dataarr.msg
									})
								}
							},
							complete(res) {
								//uni.hideLoading();
								console.log(res)
							}
						}); 
					}
				});
			},
			previewImage: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList
				});
			},
		}
	}
</script>

<style>
	.wdxxbox>view:first-child text{
		color: #666;
		padding-left: 50upx;
	}
	.wdxxbox>view:last-child text{
		color: #666;
		padding-left: 30upx;
	}
	.uni-page-head-btn{
		height: 100%;
	}
	.ysxx {
		width: 94%;
		margin: 30upx auto;
		padding: 10upx 10upx;
		padding-right: 30upx;
		background: rgba(224, 117, 3, 0.2);
		border-radius: 6px;
		-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
	}
	.avatarbox{
		padding-left: 10upx;
	}
	.avatarbox image {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}
	.wdxxtitle>text:last-child{
		color: #fff;
		background: #FF5A5F;
		height: 20px;
		font-size: 28upx;
		line-height: 20px;
		padding: 0 20upx;
		margin-right: 20upx;
		border-radius: 6upx;
	}
	
	.onname{
			width: 94%;
			margin: 20px auto;
			background: #f17503;
			background: -webkit-linear-gradient(left, #f49315 , #f17503);
			background: -o-linear-gradient(right, #f49315, #f17503);
			background: -moz-linear-gradient(right, #f49315, #f17503);
			background: -webkit-gradient(linear, left top, right top, from(#f49315) , to(#f17503));
			background: -o-linear-gradient(left, #f49315 , #f17503);
			background: linear-gradient(to right, #f49315 , #f17503);
		}
	.avatarbox view {
		height: 20px;
		line-height: 20px;
		font-size: 32upx;
		color: #d1642c;
		font-weight: bold;
	}
	.ysxxnr{
		padding-left: 30upx;
	}
	.ysxx>view:last-child text {
		color: #666;
	}
	.zcxx{
		width: 94%;
		margin: 20upx auto;
		height: 50px;
		font-size: 30upx;
		text-align: justify;
		text-align-last: left;
		padding: 0 10upx;
		border-radius: 10upx;
		font-weight: normal;
		color: #999!important;
	}
	.wdxxbox{
		width: 94%;
		margin: 10upx auto;
	}
	.wdxxmain {
		width: 94%;
		margin: 30upx auto;
		padding-bottom: 10upx;
		background: #fff;
		border-radius: 16upx;
		-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
	}

.wdmstitle {
	padding: 8upx 0upx;
		padding-left: 50upx;
		font-size: 32upx;
		font-weight: 500;
		position: relative;
		border-bottom: 1upx solid #e5e5e5;
	}
	.wdmstitle text{
		color: #999;
		font-size: 28upx;
	}
	.wdmstitle:after {
		font-family: iconfont;
		position: absolute;
		top: 2px;
		left: 6px;
		content: '\e6f3';
		font-size: 36upx;
		color: #FFAC45;
	}
	.wdxxtitle {
		padding: 8upx 0upx;
		padding-left: 50upx;
		font-size: 32upx;
		font-weight: 500;
		position: relative;
		border-bottom: 1upx solid #e5e5e5;
	}
	.wdxxtitle:after {
		font-family: iconfont;
		position: absolute;
		top: 1px;
		left: 6px;
		content: '\e6c9';
		font-size: 36upx;
		color: #FF5A5F;
	}
	
	.cell-pd {
		padding: 22upx 10upx;
	}
	
	.list-pd {
		margin-top: 0upx;
	}
	.uni-list:before,.uni-list:after{
		height: 0upx!important;
	}
	.uni-navbar--shadow {
		box-shadow: none !important;
	}
	
	.uni-uploader__file {
		position: relative;
		margin: 4px!important;
	}
	.iconshanchu {
		z-index: 1;
		position: absolute;
		right: -10upx;
		top: -10upx;
		width: 46upx;
		height: 46upx;
		border-radius: 50%;
		line-height: 40upx;
		text-align: center;
		background: #ff1919;
		font-size: 24upx;
		color: #fff;
		border: 2px solid #fafafa;
	}
	.wdmstitleimg{
		padding: 8upx 0upx;
			padding-left: 50upx;
			font-size: 32upx;
			font-weight: 500;
			position: relative;
			border-bottom: 1upx solid #e5e5e5;
		}
		.wdmstitleimg text{
			color: #999;
			font-size: 28upx;
		}
		.wdmstitleimg:after {
			font-family: iconfont;
			position: absolute;
			top: 2px;
			left: 6px;
			content: '\e716';
			font-size: 36upx;
			color: #0077cc;
		}
</style>
